<template>
	<view class="custom-rating-container">
		<!-- 循环5次，根据计算出的stars数组显示对应的星星图片 -->
		<image 
			v-for="(starSrc, index) in stars" 
			:key="index" 
			:src="starSrc" 
			class="star-image"
			mode="aspectFit"
		></image>
	</view>
</template>

<script>
export default {
	name: 'CustomRating',
	props: {
		// 接收父组件传递过来的评分值，例如 4.5
		rating: {
			type: Number,
			required: true,
			default: 0
		}
	},
	data() {
		return {
			// 定义三种星星的图片路径
			// 请确保您已将提供的三张星星图片放置在/static/stars/目录下
			fullStar: '/static/pit-avoidance/full-star.png',
			halfStar: '/static/pit-avoidance/half-star.png',
			emptyStar: '/static/pit-avoidance/empty-star.png'
		};
	},
	computed: {
		/**
		 * 计算一个包含5个星星图片路径的数组
		 * 这是实现评分逻辑的核心
		 * @returns {Array<string>}
		 */
		stars() {
			const result = [];
			// 1. 获取评分的整数部分，这就是满星的数量
			const fullStars = Math.floor(this.rating);
			// 2. 检查评分的小数部分是否大于等于0.5
			const hasHalfStar = (this.rating % 1) >= 0.5;

			// 3. 循环5次来构建星星数组
			for (let i = 1; i <= 5; i++) {
				if (i <= fullStars) {
					// 当前循环次数小于等于整数评分，显示满星
					result.push(this.fullStar);
				} else if (i === fullStars + 1 && hasHalfStar) {
					// 当前循环是紧接着满星的第一个，并且需要显示半星
					result.push(this.halfStar);
				} else {
					// 其他情况，显示空星
					result.push(this.emptyStar);
				}
			}
			return result;
		}
	}
};
</script>

<style lang="scss" scoped>
.custom-rating-container {
	display: flex;
	align-items: center;
}
.star-image {
	width: 30rpx;   /* 星星的宽度, 约等于u-rate size=15 */
	height: 30rpx;  /* 星星的高度 */
	margin-right: 2rpx; /* 星星之间的间距 */
}
</style>